@import "../../style/public";
.calendar-day-wrap {
  display: flex;
  flex: 1;
  flex-direction: column;
  height: 100%;
  color: #333;
  .disabled{
    color:#ddd !important;
  }
  .ope{
    @include remCalc(font-size, 32);
    @include remCalc(line-height, 88);
    color: $color-red;
    display: flex;
    >li{
      flex:1; 
      text-align: left;
      @include remCalc(padding, 0,30);
      &:last-child{
        text-align: right;
      }
    }
  }
  .week {
    width: 100%;
    display: flex;
    text-align: center;
    @include thin-border(true, false);
    background: #ececec;
    @include remCalc(padding, 10, 0);
    li {
      flex: 1;
      @include remCalc(font-size, 28);
    }
  }
  .data-wrap {
    overflow-y: auto;
    .month-wrap {
      text-align: center;
      @include remCalc(padding, 30, 0);
      .month {
        @include remCalc(padding, 20, 0);
        @include remCalc(font-size, 42);
      }
      .day-list {
        display: flex;
        flex-flow: wrap;
        li {
          @include remCalc(font-size, 32);
          @include remCalc(padding, 20, 0);
          width: 14.2857%;
          .money {
            color: #cecbcb;
            @include remCalc(font-size, 24);
          }
        }
      }
    }
  }
}
.calendar-week-wrap {
  text-align: center;
  color: #333;
  overflow-y: auto;
  height:100%;
  box-sizing: border-box;
  @include remCalc(padding, 0,0,150,0);
  .month-wrap {
    @include remCalc(padding, 20, 0);
    .month {
      @include remCalc(padding, 20, 0);
      @include remCalc(font-size, 38);
    }
  }

  .week-list {
    display: flex;
    flex-flow: wrap;
    li {
      width: 25%;
      @include remCalc(padding, 10, 0);
    }
    .week {
      @include remCalc(font-size, 32);
      @include remCalc(padding, 4, 0);
      color: #666;
    }
    .day {
      @include remCalc(font-size, 28);
      color: #999;
    }
    .money {
      @include remCalc(font-size, 24);
      @include remCalc(padding, 12, 0);
      color: #e2e2e2;
    }
  }
}
.calendar-month-wrap {
  text-align: center;
  color: #333;
  height: 100%;
  .data-wrap {
    @include remCalc(padding, 20, 0);
    .month-list {
      display: flex;
      flex-flow: wrap;
      li {
        @include remCalc(font-size, 32);
        @include remCalc(padding, 20, 0);
        width: 25%;
        .month {
          @include remCalc(padding, 20, 0);
          @include remCalc(font-size, 38);
        }
        .money {
          color: #cecbcb;
          @include remCalc(font-size, 24);
        }
      }
    }
  }
}
